<template>
  <div class="app-container">
    <el-button type="primary" style="margin-bottom:20px"  @click="goback">返回</el-button>

    <el-form :model="detail.UserInfo" ref="form" label-width="120px">
      <el-form-item label="登录名">
        <el-input v-model="detail.UserInfo.LoginName" v-if="detail.UserInfo.ID==''" ></el-input>
        <el-input v-model="detail.UserInfo.LoginName" v-else readonly="true" ></el-input>
      </el-form-item>
       <el-form-item label="昵称">
        <el-input v-model="detail.UserInfo.NickName"></el-input>
      </el-form-item>
       <el-form-item label="密码">
        <el-input type="password" v-model="detail.UserInfo.NewPassword"></el-input>
      </el-form-item>
       <el-form-item label="密码确认">
        <el-input type="password" v-model="detail.UserInfo.ConfirmPassword"></el-input>
      </el-form-item>
      <el-form-item label="所属角色">
        <el-select v-model="detail.Roles" multiple placeholder="请选择角色">
          <el-option
            v-for="item in roleData"
            :key="item.key"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button type="primary" v-if="detail.UserInfo.ID!==''" @click="deleteUser">删除</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getDetail, editUser, createUser, deleteUser, chooseRole } from '@/api/user'
import { setToken } from '@/utils/auth'
export default {
  data() {
    return {
      detail: {
        UserInfo: {
          ID: '',
          LoginName: '',
          NickName: '',
          NewPassword: '',
          ConfirmPassword: ''
        },
        Roles: []
      },
      roleData: []
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      if (this.$route.query.id != null) {
        getDetail(this.$route.query.id).then(response => {
          this.detail = response.Entity
          if (response.Entity == null) {
            alert('获取用户信息失败,请重试!')
            this.$router.push({ name: 'User' })
          }
        })
      }
      chooseRole().then(response => {
        if (response.Entity == null) {
          alert('获取角色信息失败,请重试!')
          this.$router.push({ name: 'User' })
        } else {
          this.roleData = response.Entity
        }
      })
    },
    goback(){
      this.$router.go(-1);
    },
    onSubmit() {
      if (this.$route.query.id != null) {
        // editUser(this.detail).then(response => {
        //   if (response.StatusCode === 0) {
        //     if (response.Entity != null) {
        //       setToken(response.Entity)
        //     }
        //     alert('编辑用户信息成功!')
        //     this.$router.push({ name: 'User' })
        //   } else {
        //     alert(response.Message)
        //   }
        // })
        this.$http.Post(sessionStorage.setList,{input:this.detail}).then(response=>{
          if (response.StatusCode === 0) {
            if (response.Entity != null) {
              setToken(response.Entity)
            }
            this.$message({
              message: '编辑用户信息成功!',
              type: 'success'
            });
            this.$router.push({ name: 'User' })
          } else {
            this.$message({
              message: response.Message,
              type: 'success'
            });
          }
        })
      } else {
        createUser(this.detail).then(response => {
          if (response.StatusCode === 0) {
            alert('用户创建成功!')
            this.$router.push({ name: 'User' })
          } else {
            alert(response.Message)
          }
        })
        // this.$http.Post(sessionStorage.createList,{input:this.detail}).then(response=>{
        //   if (response.StatusCode === 0) {
        //     this.$message({
        //       message: '用户创建成功!',
        //       type: 'success'
        //     });
        //     this.$router.push({ name: 'User' })
        //   } else {
        //     this.$message({
        //       message: response.Message,
        //       type: 'success'
        //     });
        //   }
        // })
      }
    },
    deleteUser() {
      deleteUser(this.detail.UserInfo.ID).then(response => {
        if (response.StatusCode === 0) {
          alert('删除用户信息成功!')
          this.$router.push({ name: 'User' })
        } else {
          alert(response.Message)
        }
      })
    }
  }
}

</script>